<!DOCTYPE html>
<html lang="en">

<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

  <script src="../public/js/jquery-3.2.1.min.js"></script>
  <script src="../public/js/jquery.Jcrop.js"></script>
  <script type="text/javascript">
    jQuery(function ($) {

      // Create variables (in this scope) to hold the API and image size
      var jcrop_api,
        boundx,
        boundy,

        // Grab some information about the preview pane
        $preview = $('#preview-pane'),
        $pcnt = $('#preview-pane .preview-container'),
        $pimg = $('#preview-pane .preview-container img'),

        xsize = $pcnt.width(),
        ysize = $pcnt.height();

      console.log('init', [xsize, ysize]);
      $('#target').Jcrop({
        onChange: updatePreview,
        onSelect: updatePreview,
        aspectRatio: xsize / ysize
      }, function () {
        // Use the API to get the real image size
        var bounds = this.getBounds();
        boundx = bounds[0];
        boundy = bounds[1];
        // Store the API in the jcrop_api variable
        jcrop_api = this;

        // Move the preview into the jcrop container for css positioning
 
        $preview.appendTo(jcrop_api.ui.holder);
      });

      function updatePreview(c) {
        if (parseInt(c.w) > 0) {
          var rx = xsize / c.w;
          var ry = ysize / c.h;

          var width= Math.round(rx * boundx);       //矩形宽度
          var height= Math.round(ry * boundy);      //矩形高度
          var ml=Math.round(rx * c.x);              //左边距多少
          var mt= Math.round(ry * c.y);             //上边距多少



          $pimg.css({
            width: width + 'px',
            height:height + 'px',
            marginLeft: '-' + ml + 'px',
            marginTop: '-' + mt + 'px'
          });

         $('h1').html("宽度="+width+" 高度="+height+" 左边距="+ml+" 上边距="+mt)
        }
      };

    });

  </script>
  <script>
    $(function (){
      $('#cj').click(function (){
          var w=$('.jcrop-holder>div:first').css('width')
          var h=$('.jcrop-holder>div:first').css('height')
          var l=$('.jcrop-holder>div:first').css('left')
          var t=$('.jcrop-holder>div:first').css('top')

      })
    })
  
  </script>


  <link rel="stylesheet" href="../public/css/main.css" type="text/css" />
  <link rel="stylesheet" href="../public/css/demos.css" type="text/css" />
  <link rel="stylesheet" href="../public/css/jquery.Jcrop.css" type="text/css" />
  <style type="text/css">
    /* Apply these styles only when #preview-pane has
   been placed within the Jcrop widget */

    .jcrop-holder #preview-pane {
      display: block;
      position: absolute;
      z-index: 2000;
      top: 10px;
      right: -280px;
      padding: 6px;
      border: 1px rgba(0, 0, 0, .4) solid;
      background-color: white;

      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      border-radius: 6px;

      -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
      -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
      box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);
    }
    /* The Javascript code will set the aspect ratio of the crop
   area based on the size of the thumbnail preview,
   specified here */

    #preview-pane .preview-container {          /*图片宽高比的class*/
      width: 250px;
      height: 170px;
      overflow: hidden;
    }
  </style>

</head>

<body>

  <h1></h1>

  <img src="../public/img/1.png" id="target" alt="[Jcrop Example]" />

  <div id="preview-pane">
    <div class="preview-container">
      <img src="../public/img/1.png" class="jcrop-preview" alt="Preview" />
    </div>
  </div>

<input type="button" id="cj" value="获取坐标">

</body>

</html>